<template>
    <Header class="noselect">
        <div class="layout-logo">
            <img :src="appLogo || '../images/logo.png'" />
            <span class="platform">{{platform}}</span>
        </div>
        <div class="user-info">
            <span class="icon-class" title="个人信息" v-on:click="toPersonal">
                <Avatar v-if="isImage" :src="userImage" />
                <Icon v-else type="md-person" :size="23" />
            </span>
            <span class="line"></span>
            <span class="system-notes">
                {{orgName}}<br>
                <Tag color="#696e79">{{userName}}</Tag>
                <Tag color="magenta">{{terminalType}}</Tag>
            </span>
            <span class="line"></span>
            <span class="icon-class" title="退出登录" v-on:click="signOut">
                <Icon type="ios-log-out" :size="23" />
            </span>
        </div>
    </Header>
</template>
<script>
export default {
    name: 'hig-header',
    props: {
        isNav: Boolean,
        storeName: String
    },
    data() {
        return {
            platform: this.$store.getUser('appName'),
            orgName: this.$store.getOrg('orgName'),
            userName: this.$store.getUser('userName'),
            userImage: this.$store.getUser('userImage'),
            appLogo: this.$store.getUser('appLogo'),
        }
    },
    computed: {
        isImage() {
            if(this.$store.getUser('userImage') && this.$store.getUser('userImage') != 'undefined') {
                return true
            } else {
                return false
            }
        },
        terminalType() {
            switch(Number(this.$store.getShop('shopType'))) {
                case 0:
                    return '直营店'
                case 1:
                    return '加盟店'
                default:
                    return '其它终端'
            }
        }
    },
    methods: {
        signOut(){
            this.$store.clear()
            this.$router.push('/login')
        },
        toPersonal(){
            this.$router.push('/system/personal/index')
        }
    },
    created() {
        //设置组织信息回调
        this.$store.setInitOrgCallbank((e)=>{
            this.orgName = e.orgName
        })
    }
}
</script>
<style scoped>
.layout-logo {
    height: 30px; line-height: 30px;
    float: left;
    position: relative;
    top: 15px;
    left: 0;
}
.layout-logo img {
    width: 40px; vertical-align: middle; border-radius:50px ;
}
.layout-logo .platform {
    color: #ffffffbd; font-size: 25px; position: relative; top: 5px; margin-left: 3px;
}
.user-info{
    float: right; color: #ffffff;
}
.user-info>span {
    padding: 0 3px; display: inline-block; vertical-align: middle;
}
.user-info>span.icon-class {
    cursor: pointer;
}
.user-info>span.icon-class>i {
    vertical-align: middle;
}
.user-info>span.icon-class:hover>i {
    color: #ffffff;
}
.user-info>span.system-notes {
    line-height: 21px; text-align:right;
}
.user-info>span.line {
    width: 1px; height: 20px; border-left: 1px solid #666e7f; margin-left: 7px;
}
</style>